<template>
    <div class="prescription-container">
      <!-- 搜索框 -->
      <div class="search-box">
        <input 
          type="text" 
          placeholder="输入搜索内容"
          class="search-input"
        >
        <button class="search-button">搜索</button>
      </div>
  
      <!-- 主要信息区域 -->
      <div class="info-card">
        <!-- 头部信息 -->
        <div class="header-section">
          <div class="header-title">挂号单ID</div>
          <div class="header-content">GH1807272467373897728</div>
        </div>
  
        <!-- 详细信息列表 -->
        <div class="detail-list">
          <div class="detail-item">
            <span class="detail-label">挂号单号：</span>
            <span class="detail-value">GH1807272467373897728</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">科室名称：</span>
            <span class="detail-value">儿科</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">就诊时间：</span>
            <span class="detail-value">2024/6/30 12:40:57</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">就诊信息：</span>
            <span class="detail-value">1</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">医生姓名：</span>
            <span class="detail-value">李时珍</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">患者姓名：</span>
            <span class="detail-value">平春竹</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">主诉：</span>
            <span class="detail-value">1</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">医生建议：</span>
            <span class="detail-value">1</span>
          </div>
        </div>
  
        <!-- 功能按钮组 -->
        <div class="action-buttons">
          <button 
            v-for="(btn, index) in buttons" 
            :key="index"
            class="action-btn"
            :style="{ backgroundColor: btnColors[index] }"
          >
            {{ btn }}
          </button>
        </div>
  
        <!-- 订单金额 -->
        <div class="amount-section">
          <span>订单总额：</span>
          <span class="amount">￥0</span>
        </div>
  
        <!-- 处方信息 -->
        <div class="prescription-section">
          <div class="prescription-title">【药用处方】</div>
          <div class="prescription-item">
            <span>【1】【处方总额】：</span>
            <span class="prescription-amount">￥51</span>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const buttons = ref(['A 金额', 'B 取消金额', 'C 取消退费', 'D 支付回退费'])
  const btnColors = ref(['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'])
  </script>
  
  <style scoped>
  .prescription-container {
    font-family: 'Microsoft YaHei', sans-serif;
    max-width: 480px;
    margin: 20px auto;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  
  .search-box {
    display: flex;
    margin-bottom: 20px;
    gap: 10px;
  }
  
  .search-input {
    flex: 1;
    padding: 8px 15px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
  }
  
  .search-button {
    padding: 8px 20px;
    background: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .search-button:hover {
    background: #66b1ff;
  }
  
  .info-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #ebeef5;
  }
  
  .header-section {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .header-title {
    font-size: 16px;
    color: #303133;
    margin-bottom: 5px;
  }
  
  .header-content {
    font-size: 18px;
    color: #409EFF;
    font-weight: 500;
  }
  
  .detail-list {
    margin-bottom: 20px;
  }
  
  .detail-item {
    display: flex;
    margin-bottom: 12px;
    font-size: 14px;
  }
  
  .detail-label {
    color: #909399;
    width: 100px;
    flex-shrink: 0;
  }
  
  .detail-value {
    color: #606266;
  }
  
  .action-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 20px 0;
  }
  
  .action-btn {
    padding: 10px;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  
  .action-btn:hover {
    opacity: 0.9;
  }
  
  .amount-section {
    text-align: right;
    font-size: 14px;
    color: #606266;
    padding: 15px 0;
    border-top: 1px solid #ebeef5;
  }
  
  .amount {
    color: #f56c6c;
    font-weight: bold;
    margin-left: 10px;
  }
  
  .prescription-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ebeef5;
  }
  
  .prescription-title {
    font-size: 14px;
    color: #303133;
    margin-bottom: 10px;
  }
  
  .prescription-item {
    display: flex;
    justify-content: space-between;
    color: #606266;
    font-size: 14px;
  }
  
  .prescription-amount {
    color: #67c23a;
    font-weight: 500;
  }
  </style>